<template>
    <div class="app-container">

        <div class="card-wrap flex-column justify-end card-padding">

            <div class="card-title-wrap">
                <span>新增线索</span>
                <span>说明：*为必填信息</span>
            </div>


            <el-form ref="form" :rules="2==form.cluesFollowerTypeCode?rules2:rules1" :model="form" label-width="80px"
                     label-position="top">

                <el-row :gutter="30">

                    <el-col :span="8">
                        <el-form-item label="客户类型:" prop="customerTypeCode">
                            <el-radio-group v-model="form.customerTypeCode">
                                <template v-for="dict in dict.type.customer_type">
                                    <el-radio :label="dict.value">{{ dict.label }}</el-radio>
                                </template>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="客户标签:" prop="customerLabel">
                            <el-select @change="customerLabelChanage" filterable v-model="form.customerLabel" clearable style="width: 100%">
                                <template v-for="dict in dict.type.customer_label">
                                    <el-option :label="dict.label" :value="dict.label" :key="dict.label"></el-option>
                                </template>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="客户属性:" prop="customerPropertyCode">
                            <el-radio-group v-model="form.customerPropertyCode">
                                <template v-for="dict in dict.type.customer_property">
                                    <el-radio :label="dict.value">{{ dict.label }}</el-radio>
                                </template>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="客户等级:" prop="customerLevelCode">
                            <el-radio-group v-model="form.customerLevelCode">
                                <template v-for="dict in dict.type.customer_level">
                                    <el-radio :label="dict.value">{{ dict.label }}</el-radio>
                                </template>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="业务范围:" prop="businessScopeCode">

                            <el-radio-group v-model="form.businessScopeCode">
                                <template v-for="dict in dict.type.business_scope">
                                    <el-radio :label="dict.value">{{ dict.label }}</el-radio>
                                </template>
                            </el-radio-group>

                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="客户名称:" prop="customerName">
                            <el-input maxlength="50" v-model="form.customerName" clearable
                                      placeholder="请输入客户名称"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="联系方式:" prop="customerPhone">
                            <el-input type="text" @input="value=>form.customerPhone=value.replace(/[^\d]/g,'')"
                                      :maxlength="12" v-model="form.customerPhone" placeholder="请输入联系方式">
                            </el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="紧急联系人:" prop="contact">
                            <el-input maxlength="50" v-model="form.contact" clearable
                                      placeholder="请输入紧急联系人"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="紧急联系人联系方式:" prop="contactPhone">
                            <el-input type="text" @input="value=>form.contactPhone=value.replace(/[^\d]/g,'')"
                                      :maxlength="12" v-model="form.contactPhone" clearable
                                      placeholder="请输入紧急联系人联系方式"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="线索来源:" prop="cluesSource">
                            <el-select @change="cluesSourceChange" filterable v-model="form.cluesSource" clearable style="width: 100%">
                                <template v-for="dict in dict.type.clues_source">
                                    <el-option :label="dict.label" :value="dict.label" :key="dict.label"></el-option>
                                </template>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="线索状态:" prop="cluesStatus">
                            <el-select @change="cluesChange" filterable v-model="form.cluesStatus" clearable style="width: 100%">
                                <template v-for="dict in dict.type.clues_status">
                                    <el-option :label="dict.label" :value="dict.label" :key="dict.label"></el-option>
                                </template>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="意向情况:" prop="cluesIntentionCode">
                            <el-select filterable v-model="form.cluesIntentionCode" clearable style="width: 100%">
                                <template v-for="dict in dict.type.clues_intention">
                                    <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                                </template>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="跟进人:" prop="cluesFollowerTypeCode">

                            <el-radio-group v-model="form.cluesFollowerTypeCode">
                                <template v-for="dict in dict.type.clues_follower_type">
                                    <el-radio :label="dict.value">{{ dict.label }}</el-radio>
                                </template>
                            </el-radio-group>

                        </el-form-item>
                    </el-col>

                    <el-col :span="8" v-show="2==form.cluesFollowerTypeCode">
                        <el-form-item label="选择组织:" prop="deptLabel">
                            <el-select ref="deptselect" @click.native="deptClick" v-model="form.deptLabel"
                                       style="width: 100%">

                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8" v-show="2==form.cluesFollowerTypeCode">
                        <el-form-item label="选择用户:" prop="followerIdList">
                            <el-select filterable v-model="form.followerIdList" multiple clearable style="width: 100%">
                                <template v-for="(item) in userList">
                                    <el-option :label="item.userName" :value="item.userId"
                                               :key="item.userId"></el-option>
                                </template>
                            </el-select>
                        </el-form-item>
                    </el-col>

                </el-row>

            </el-form>


        </div>

        <div class="card-wrap flex justify-end card-padding">
            <el-button @click="cancel">取消</el-button>
            <el-button :loading="buttonLoading" type="primary" @click="submitForm">保存</el-button>
        </div>

        <el-dialog
            title="选择组织"
            :visible.sync="dialogVisible"
            width="35%">
            <div class="head-container">
                <el-tree
                    :data="deptOptions"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    ref="tree"
                    node-key="id"
                    default-expand-all
                    highlight-current
                    @node-click="handleNodeClick"
                />
            </div>
        </el-dialog>

    </div>
</template>

<script>


import {deptTreeSelect, listUser} from "@/api/system/user";
import {customerAdd, customerDetail, customerUpdate} from "@/api/memberManage/memberList";
import {cluesAdd, cluesDetail, cluesUpdate} from "@/api/memberManage/clueList";

export default {
    name: "clueAdd",
    components: {},
    dicts: ['clues_follower_type', 'customer_type', 'customer_label', 'clues_intention',
        'customer_property', 'customer_level', 'business_scope', 'clues_source', 'clues_status'],
    data() {
        return {
            buttonLoading: false,
            form: {
                followerIdList: null,
                deptId: null,
                deptLabel: null,
            },
            dialogVisible: false,
            deptOptions: null,
            defaultProps: {
                children: "children",
                label: "label"
            },

            userList: [],
            rules1: {
                customerTypeCode: [
                    {
                        required: true,
                        message: '请选择客户类型',
                        trigger: 'change'
                    }
                ],
                businessScopeCode: [
                    {
                        required: true,
                        message: '请选择业务范围',
                        trigger: 'change'
                    }
                ],
                customerName: [
                    {
                        required: true,
                        message: '请输入客户名称',
                        trigger: 'blur'
                    }
                ],
                customerPhone: [
                    {
                        required: true,
                        message: '请输入联系方式',
                        trigger: 'blur'
                    }, {pattern: /^(1[3456789]\d{9}|[0-9]{5,12})$/, message: '联系方式格式不正确', trigger: 'blur'}

                ],
                contactPhone: [
                    {pattern: /^(1[3456789]\d{9}|[0-9]{5,12})$/, message: '联系方式格式不正确', trigger: 'blur'}
                ],
                cluesSourceCode: [
                    {
                        required: true,
                        message: '请选择线索来源',
                        trigger: 'change'
                    }
                ],
                cluesStatusCode: [
                    {
                        required: true,
                        message: '请选择线索状态',
                        trigger: 'change'
                    }
                ],
                cluesIntentionCode: [
                    {
                        required: true,
                        message: '请选择意向情况',
                        trigger: 'change'
                    }
                ],
                cluesFollowerTypeCode: [
                    {
                        required: true,
                        message: '请选择跟进人',
                        trigger: 'change'
                    }
                ]
            },
            rules2: {
                customerTypeCode: [
                    {
                        required: true,
                        message: '请选择客户类型',
                        trigger: 'change'
                    }
                ],
                businessScopeCode: [
                    {
                        required: true,
                        message: '请选择业务范围',
                        trigger: 'change'
                    }
                ],
                customerName: [
                    {
                        required: true,
                        message: '请输入客户名称',
                        trigger: 'blur'
                    }
                ],
                customerPhone: [
                    {
                        required: true,
                        message: '请输入联系方式',
                        trigger: 'blur'
                    }
                ],
                cluesSourceCode: [
                    {
                        required: true,
                        message: '请选择线索来源',
                        trigger: 'change'
                    }
                ],
                cluesStatusCode: [
                    {
                        required: true,
                        message: '请选择线索状态',
                        trigger: 'change'
                    }
                ],
                cluesIntentionCode: [
                    {
                        required: true,
                        message: '请选择意向情况',
                        trigger: 'change'
                    }
                ],
                cluesFollowerTypeCode: [
                    {
                        required: true,
                        message: '请选择跟进人',
                        trigger: 'change'
                    }
                ],
                followerIdList: [
                    {
                        required: true,
                        message: '请选择跟进用户',
                        trigger: 'change'
                    }
                ],
            },
        };
    },
    created() {
        this.getDeptTree()
        this.getUserList()
    },
    watch:{
        // '$route':{
        //     handler(val){
        //         console.log('this.$route', this.$route)
        //
        //         if(val && val.name==this.$options.name){
        //             if (this.$route.query && this.$route.query.cluesId && !this.$route.query.tabClick) {
        //                 this.getOldData(this.$route.query.cluesId)
        //             }
        //             else if(!this.$route.query.tabClick){
        //                 this.form = {
        //                     followerIdList: null
        //                 }
        //             }
        //             const title = this.$route?.query?.pageType ?? '线索'
        //             const route = Object.assign({}, this.$route, {title: `${title}`})
        //             this.$store.dispatch('tagsView/updateVisitedView', route)
        //         }
        //     },
        //     immediate:true,
        //     deep:true
        // }
    },
    mounted() {
        console.log('/clues/clues/{cluesId}==>', this.$route.query)
        if (this.$route.query && this.$route.query.cluesId) {
            this.getOldData(this.$route.query.cluesId)
        }
        const title = this.$route?.query?.pageType ?? '线索'
        const route = Object.assign({}, this.$route, {title: `${title}`})
        this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    methods: {
        cluesSourceChange(val){
            let find = this.dict.type.clues_source.find(item=>val==item.label);
            if(find){
                this.form.cluesSourceCode = find.value;
            }else {
                this.form.cluesSourceCode = null;
            }
        },
        customerLabelChanage(val){
            let find = this.dict.type.customer_label.find(item=>val==item.label);
            if(find){
                this.form.customerLabelCode = find.value;
            }else {
                this.form.customerLabelCode = null;
            }
        },
        cluesChange(val){
            let find = this.dict.type.clues_status.find(item=>val==item.label);
            if(find){
                this.form.cluesStatusCode = find.value;
            }else {
                this.form.cluesStatusCode = null;
            }
        },
        cancel() {
            this.$router.back();
            this.$store.dispatch('tagsView/delView', this.$route);
        },
        submitForm() {
            let that = this

            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.buttonLoading = true;

                    if (that.form.cluesId) {
                        cluesUpdate(that.form).then(res => {
                            this.buttonLoading = false;
                            this.$modal.msgSuccess("提交成功");
                            this.$router.back();
                            this.$store.dispatch('tagsView/delView', this.$route);
                        }).finally(e => {
                            this.buttonLoading = false;
                        })
                    } else {
                        cluesAdd(that.form).then(res => {
                            this.buttonLoading = false;
                            this.$modal.msgSuccess("提交成功");
                            this.$router.back();
                            this.$store.dispatch('tagsView/delView', this.$route);
                        }).finally(e => {
                            this.buttonLoading = false;
                        })
                    }
                }
            });
        },
        getOldData(cluesId) {
            cluesDetail(cluesId).then(res => {
                this.form = res.data.clues
                // if (res.data.clues.followerIdList) {
                //     this.form.followerIdList = Number(res.data.clues.followerIdList)
                // }
            })
        },
        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        /** 查询组织下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then(response => {
                this.deptOptions = response.data;
            });
        },
        // 节点单击事件
        handleNodeClick(data) {
            console.log('data', data)

            this.form.deptLabel = data.label
            this.form.deptId = data.id;
            this.form.followerIdList = null;

            this.dialogVisible = false;

            this.getUserList();
        },
        getUserList() {
            listUser({
                pageNum: 1,
                pageSize: 100000,
                deptId: this.form.deptId,
                status: 0
            }).then(response => {
                    this.userList = response.rows;
                    // this.total = response.total;
                    // this.loading = false;
                }
            );
        },
        deptClick() {
            this.dialogVisible = true
            this.$refs.deptselect.blur()
        },
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    margin-bottom: 15px;
    width: 70%;
}


</style>
